<script setup lang="ts">
import { ElSlider, ElColorPicker } from "element-plus";
import { useAppStore } from "@renderer/store/modules/app";
import { watch, reactive } from "vue";

const appStore = useAppStore();

const state = reactive({
    sizePercent: appStore.fontSize,
    fontColor: appStore.color,
});

watch(
    () => state.sizePercent,
    (newVal) => {
        appStore.changeFontSize(newVal);
    }
);
watch(
    () => state.fontColor,
    (newVal) => {
        appStore.changeColor(newVal);
    }
);
</script>
<template>
    <ipcMain>
        <h3>字体大小</h3>
        <section class="slider setting-item">
            <el-slider
                style="width: 85%"
                :show-tooltip="false"
                :min="20"
                :max="300"
                v-model="state.sizePercent"
            />
        </section>
        <h3>字体颜色</h3>
        <section class="picker setting-item">
            <el-color-picker style="width: 85%" v-model="state.fontColor" />
        </section>
    </ipcMain>
</template>
<style lang="scss" scoped>
.setting-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

h3 {
    padding-left: 10px;
    margin-top: 10px;
    margin-left: 5px;
    font-size: 18px;
    font-weight: 400;
    user-select: none;
    border-left: 3px solid #74b3eb;
}
</style>
